<template>
    <!--:model="tenant" 数据双向绑定-->
    <!--ref="tenantForm" id="tenantForm",给form去一个名字-->
    <!--:rules="formRules" 校验规则-->
    <div>
        <el-form :model="employee" ref="tenantForm" :rules="formRules" label-position="left" label-width="100px"
                 class="demo-ruleForm login-container">
            <!--tab标签-->
            <el-tabs type="border-card" style="height: 100%;width: 100%;margin: 0px;padding: 0px" v-model="activeName"
                     @tab-click="handleClick">
                <el-tab-pane label="公司入驻" name="first"></el-tab-pane>
                <el-tab-pane label="员工注册" name="second">
                    <el-form-item prop="username" label="用户名">
                        <el-input type="text" v-model="employee.username" auto-complete="off"
                                  placeholder="请输入用户名！"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input type="password" v-model="employee.password" auto-complete="off"
                                  placeholder="请输入密码！"></el-input>
                    </el-form-item>
                    <el-form-item prop="comfirmPassword" label="确认密码">
                        <el-input type="password" v-model="employee.comfirmPassword" auto-complete="off"
                                  placeholder="请输入确认密码！"></el-input>
                    </el-form-item>
                    <el-form-item prop="employeeNumber" label="工号">
                        <el-input type="text" v-model="employee.employeeNumber" auto-complete="off"
                                  placeholder="请输入员工工号！"></el-input>
                    </el-form-item>
                    <el-form-item prop="realName" label="真实姓名">
                        <el-input type="text" v-model="employee.realName" auto-complete="off"
                                  placeholder="请输入真实姓名！"></el-input>
                    </el-form-item>
                    <el-form-item prop="tel" label="电话号码">
                        <el-input type="text" v-model="employee.tel" auto-complete="off"
                                  placeholder="请输入电话号码！"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="电子邮件">
                        <el-input type="text" v-model="employee.email" auto-complete="off"
                                  placeholder="请输入邮箱！"></el-input>
                    </el-form-item>
                    <el-form-item prop="company" label="所属公司">
                        <el-input type="text" v-model="employee.tenant.companyName" auto-complete="off"
                                  placeholder="请输入所属公司！" @blur="validateCompany"></el-input>
                    </el-form-item>
                    <el-form-item label="上级部门" prop="parent">
                        <!--v-model="addForm.parentId"对应:value="item.id"-->
                        <el-select v-model="employee.dept.id" placeholder="请选择部门"
                                   style="width:100%">
                            <el-option v-for="item in departmentSelect" :key="item.id" :label="item.name"
                                       :value="item.id" width="500px"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="logoUrl" label="公司Logo">
                        <!--上传-->
                        <el-upload
                                class="upload-demo"
                                action="http://localhost/file/logoUpload"
                                :on-success="handleSuccess"
                                :limit="1"
                                :on-exceed="handleExceed"
                                :file-list="fileList"
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button type="primary" style="width:100%;" @click.native.prevent="settledIn">注册</el-button>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            /*确认密码验证*/
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                } else if (value !== this.employee.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                /*选项卡切换值*/
                activeName: 'second',
                /*部门下拉框*/
                departmentSelect: [],
                /*不知道干啥用的*/
                fileList: [],
                /*对象封装的值*/
                employee: {
                    username: '',
                    password: '',
                    employeeNumber: '',
                    realName: '',
                    tel: '',
                    email: '',
                    dept: {
                        id: ''
                    },
                    /*不进行封装*/
                    comfirmPassword: '',
                    /*不进行封装,用于ajax验证是否存在该公司*/
                    tenant: {
                        id: '',
                        companyName: ''
                    },
                    logoUrl:''
                },
                /*自定义验证项*/
                customValidate: {
                    res: false,
                    msg: ''
                },
                /*表单验证*/
                formRules: {
                    username: [
                        {required: true, message: '请输入用户名!', trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请输入真实姓名!', trigger: 'blur'}
                    ],
                    employeeNumber: [
                        {required: true, message: '请输入工号!', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码!', trigger: 'blur'}
                    ],
                    comfirmPassword: [
                        {required: true, validator: validatePass2, trigger: 'blur'} //自定义校验规则
                    ]
                }
            };
        },
        methods: {
            /*图片上传结果*/
            handleSuccess(res, file, fileList) {
                if (res.success) {
                    //后台上传成功之后，返回图片名
                    this.employee.logoUrl = res.fileName;
                }
                else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            },
            /*上传个数限制*/
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件`);
            },
            /*部门下拉框数据*/
            selectBox(id) {
                /*当前公司下的部门*/
                this.$http.get('/department/list/' + id).then(res => {
                    this.departmentSelect = res.data;
                });
            },
            /*跳转到租户注册选项卡*/
            handleClick(tab, event) {
                if (tab.index == 0) {
                    this.$router.push({path: '/registerForTenant'});
                }
            },
            /*注册*/
            settledIn() {
                /*先进行自定义验证 公司名存在才能通过*/
                if (!this.customValidate.res) {
                    this.$message({
                        message: this.customValidate.msg,
                        type: 'error'
                    });
                    return;
                }
                this.$refs.tenantForm.validate((valid) => {
                    //校验表单
                    if (valid) {
                        this.$confirm('确认注册吗？', '提示', {}).then(() => {
                            //表单值拷贝
                            let para = Object.assign({}, this.employee);
                            this.$http.put("/employee/save", para).then((res) => {
                                if (res.data.success) {
                                    //跳转登录页面
                                    this.$router.push({path: '/login'});
                                }
                                else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }

                            });
                        });
                    }
                })
            },
            /*查询公司是否存在*/
            validateCompany() {
                let para = {"companyName": this.employee.tenant.companyName}
                this.$http.post("/tenant/queryByName", para).then((res) => {
                    if (res.data) {
                        /*赋值租户对象*/
                        this.employee.tenant.id = res.data.id;
                        /*设置自定义验证项为true 用于提交表单时的判断*/
                        this.customValidate.res = true;
                        /*查询公司旗下的部门*/
                        this.selectBox(res.data.id);
                    } else {
                        this.customValidate.res = false;
                        /*自定义验证不通过时的再次提醒 防止强制提交*/
                        this.customValidate.msg = "该公司不存在或未注册";
                        this.$message({
                            message: "该公司不存在或未注册",
                            type: 'error'
                        });
                    }
                });
            }
        }
    }

</script>
<style>
    .el-tabs__nav-wrap
    .el-tabs__nav-scroll
    .el-tabs__nav {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
</style>
<style lang="scss" scoped>

    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 0px auto;
        width: 500px;
        padding: 10px 0px 0px 0px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
    }

</style>